<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3|Html5- CSS3|Html5 </title>
<meta name="keywords" content="">
<meta name="description" content="博客网站制作，本栏目主要是分享关于域名选择、空间购买，个人博客网站模板制作，网站后期维护运营，优化等相关文章，以及提供帝国cms建站过程中遇到问题的解决办法。">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="static/css/base.css" rel="stylesheet">
<link href="static/css/m.css" rel="stylesheet">
<script src="static/js/jquery-1.8.3.min.js"></script>
<script src="static/js/comm.js"></script>
<!--[if lt IE 9]>
<script src="static/js/modernizr.js"></script>
<![endif]-->
</head>
<body>
<!--top begin-->
<!--top begin-->
<header id="header">
  <div class="navbox">
    <h2 id="mnavh"><span class="navicon"></span></h2>
    <div class="logo"><a href="index.html">杨青青个人博客</a></div>
 <nav>
<ul id="starlist">
     <li><a href="index.html" title="首页">网站首页</a></li> 
  <li><a href="index1.html">个人博客日记</a></li>    <li class="menu"><a href="index2.html">网站制作</a>
  <ul class="sub">
   
      <li><a href="">CSS3|Html5</a></li><li><a href="index4.html">网站建设</a></li><li><a href="index5.html">推荐工具</a></li>    </ul><span></span></li>
    <li><a href="index6.html">设计心得</a></li>  <li><a href="index7.html">关于我</a></li>  <li><a href="index8.html">时间轴</a></li>  <li><a href="index9.html">博客导航</a></li>  <li><a href="11.html">留言</a></li>    </ul>
</nav>
    <div class="searchico"></div>
  </div>
</header>
<div class="searchbox">
  <div class="search">
    <form action="/e/search/index.php" method="post" name="searchform" id="searchform">
      <input name="keyboard" id="keyboard" class="input_text" value="请输入关键字词" style="color: rgb(153, 153, 153);" onfocus="if(value=='请输入关键字词'){this.style.color='#000';value=''}" onblur="if(value==''){this.style.color='#999';value='请输入关键字词'}" type="text">
      <input name="show" value="title" type="hidden">
      <input name="tempid" value="1" type="hidden">
      <input name="tbname" value="news" type="hidden">
      <input name="Submit" class="input_submit" value="搜索" type="submit">
    </form>
  </div>
  <div class="searchclose"></div>
</div>
<!--top end-->
<article> 
  <!--lbox begin-->
  <div class="lbox">
    <div class="whitebg lanmu"> <img src="static/picture/lm03.jpg">
      <h1>CSS3|Html5</h1>
      <p>博客网站制作，本栏目主要是分享关于域名选择、空间购买，个人博客网站模板制作，网站后期维护运营，优化等相关文章，以及提供帝国cms建站过程中遇到问题的解决办法。</p>
    </div>
    <div class="whitebg bloglist">
      <h2 class="htitle">最新博文</h2>
      <ul>

        <li>
          <h3 class="blogtitle"><b>【顶】</b><a href="14.html" target="_blank">十条设计原则教你学会如何设计网页布局!</a></h3>
           <span class="blogpic imgscale"><i><a href="" target="_blank">CSS3|Html5</a></i><a href="14.html" title="十条设计原则教你学会如何设计网页布局!"><img src="static/picture/718b56be9dbf920cc0a6124545216654.jpg" alt="十条设计原则教你学会如何设计网页布局!"></a></span>
          <p class="blogtext">网页常见的布局有很多种,单列布局,多列布局.其中单列布局是国外很多网站比较常用的.咱们很多站长以及门户网站都使用的是是两列布局,很少用三列布局的.下面我来分享下我们常用的网页布局格式以及设计技巧 </p>
          <p class="bloginfo"><i class="avatar"><script src="static/js/thea6.js"></script></i><span></span><span>2018-11-08</span><span>【<a href="" target="_blank">CSS3|Html5</a>】</span></p>
          <a href="14.html" class="viewmore">阅读更多</a> </li>

        <li>
          <h3 class="blogtitle"><a href="17.html" target="_blank">【分享】css3侧边栏导航不同方向划出效果</a></h3>
           <span class="blogpic imgscale"><i><a href="" target="_blank">CSS3|Html5</a></i><a href="17.html" title="【分享】css3侧边栏导航不同方向划出效果"><img src="static/picture/0ce295f3c5f3c2d60e45e5715580aefa.jpg" alt="【分享】css3侧边栏导航不同方向划出效果"></a></span>
          <p class="blogtext">设定一组侧边栏导航菜单，然后可以从任何一边滑出。有两种实现方式，一种固定菜单，一种从左右两侧推出 </p>
          <p class="bloginfo"><i class="avatar"><script src="static/js/thea6.js"></script></i><span></span><span>2018-11-08</span><span>【<a href="" target="_blank">CSS3|Html5</a>】</span></p>
          <a href="17.html" class="viewmore">阅读更多</a> </li>

        <li>
          <h3 class="blogtitle"><a href="16.html" target="_blank">使用CSS3制作文字、图片倒影</a></h3>
           <span class="blogpic imgscale"><i><a href="" target="_blank">CSS3|Html5</a></i><a href="16.html" title="使用CSS3制作文字、图片倒影"><img src="static/picture/1cba05d9e0c7cfcfa897394b85f7e5f9.jpg" alt="使用CSS3制作文字、图片倒影"></a></span>
          <p class="blogtext">CSS3制作文字、图片倒影需要涉及到使用CSS3.0新属性之box-reflect。box-reflect属性目前仅在Chrome、Safari和Opera浏览器下支持，但这并不影响我们来学习这个属性的应用 </p>
          <p class="bloginfo"><i class="avatar"><script src="static/js/thea6.js"></script></i><span></span><span>2018-11-08</span><span>【<a href="" target="_blank">CSS3|Html5</a>】</span></p>
          <a href="16.html" class="viewmore">阅读更多</a> </li>

        <li>
          <h3 class="blogtitle"><a href="15.html" target="_blank">三步实现滚动条触动css动画效果</a></h3>
           <span class="blogpic imgscale"><i><a href="" target="_blank">CSS3|Html5</a></i><a href="15.html" title="三步实现滚动条触动css动画效果"><img src="static/picture/a1fbdb8105f82ea04993f2dbbeacf29a.jpg" alt="三步实现滚动条触动css动画效果"></a></span>
          <p class="blogtext">现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果，ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力 </p>
          <p class="bloginfo"><i class="avatar"><script src="static/js/thea6.js"></script></i><span></span><span>2018-11-08</span><span>【<a href="" target="_blank">CSS3|Html5</a>】</span></p>
          <a href="15.html" class="viewmore">阅读更多</a> </li>

        <li>
          <h3 class="blogtitle"><a href="13.html" target="_blank">别让这些闹心的套路，毁了你的网页设计</a></h3>
           <span class="blogpic imgscale"><i><a href="" target="_blank">CSS3|Html5</a></i><a href="13.html" title="别让这些闹心的套路，毁了你的网页设计"><img src="static/picture/393d21b65031dd0d85eb2e5789a97b1e.jpg" alt="别让这些闹心的套路，毁了你的网页设计"></a></span>
          <p class="blogtext">网页设计和做人一样，需要少一些套路，多一些真诚。那么下面就为大家揭穿那些看似好用，但用户体验并不好的设计模式。另外再附上解决办法，避免网页设计中出现这些问题 </p>
          <p class="bloginfo"><i class="avatar"><script src="static/js/thea6.js"></script></i><span></span><span>2018-11-08</span><span>【<a href="" target="_blank">CSS3|Html5</a>】</span></p>
          <a href="13.html" class="viewmore">阅读更多</a> </li>

      </ul>
      <!--pagelist-->
      <div class="pagelist"></div>
      <!--pagelist end--> 
    </div>
    <!--bloglist end--> 
  </div>
  <div class="rbox">
    <div class="whitebg paihang">
      <h2 class="htitle">点击排行</h2>
            <section class="topnews imgscale"><a href="14.html"><img src="static/picture/718b56be9dbf920cc0a6124545216654.jpg"><span>十条设计原则教你学会如何设计网页布局!</span></a></section>
      <ul>
        <li><i></i><a href="16.html" title="使用CSS3制作文字、图片倒影" target="_blank">使用CSS3制作文字、图片倒影</a></li>
        <li><i></i><a href="17.html" title="【分享】css3侧边栏导航不同方向划出效果" target="_blank">【分享】css3侧边栏导航不同方向划出效果</a></li>
        <li><i></i><a href="15.html" title="三步实现滚动条触动css动画效果" target="_blank">三步实现滚动条触动css动画效果</a></li>
        <li><i></i><a href="13.html" title="别让这些闹心的套路，毁了你的网页设计" target="_blank">别让这些闹心的套路，毁了你的网页设计</a></li>
      </ul>
    </div>
    <div class="whitebg tuijian">
      <h2 class="htitle">本栏推荐</h2>
          <section class="topnews imgscale"><a href="14.html"><img src="static/picture/718b56be9dbf920cc0a6124545216654.jpg"><span>十条设计原则教你学会如何设计网页布局!</span></a></section>
      <ul>

        <li><a href="13.html" title="别让这些闹心的套路，毁了你的网页设计" target="_blank"><i><img src="static/picture/393d21b65031dd0d85eb2e5789a97b1e.jpg"></i>
          <p>别让这些闹心的套路，毁了你的网页设计</p>
          </a></li>


      </ul>
    </div>
    <div class="ad whitebg imgscale">
      <ul>
        <a href='javascript:;' target="_blank"><img src='static/picture/ad.jpg'></a>      </ul>
    </div>
    <div class="whitebg cloud">
      <h2 class="htitle">标签云</h2>
      <ul>
       <a href="E7A9BAE997B4_8.html" target="_blank">空间</a> <a href="E88A82E697A5_8.html" target="_blank">节日</a> <a href="E58D9AE5AEA2_8.html" target="_blank">博客</a> <a href="E4BB8AE5A495E4BD95E5A495_8.html" target="_blank">今夕何夕</a> <a href="E98791E7899BE4BA91E69C8D_8.html" target="_blank">金牛云服</a> <a href="E69599E7A88B_8.html" target="_blank">教程</a> <a href="E4B8AAE4BABA_8.html" target="_blank">个人</a> <a href="E8A786E9A291E69599E7A88B_8.html" target="_blank">视频教程</a> <a href="E4B8AAE4BABAE58D9AE5AEA2_8.html" target="_blank">个人博客</a> <a href="E88BB1E69687_8.html" target="_blank">英文</a> <a href="E998BFE9878CE4BA91_8.html" target="_blank">阿里云</a> <a href="E7BD91E7AB99E588B6E4BD9C_8.html" target="_blank">网站制作</a> <a href="E799BEE5BAA6_8.html" target="_blank">百度</a> <a href="E5B89DE59BBDcms_8.html" target="_blank">帝国cms</a> <a href="E6AF94E8B59B_8.html" target="_blank">比赛</a>      </ul>
    </div>
 
   <div class="whitebg wenzi">
      <h2 class="htitle">猜你喜欢</h2>
      <ul>
                        <li><a target="_blank" href="14.html">十条设计原则教你学会如何设计网页布局!</a></li>
                        <li><a target="_blank" href="15.html">三步实现滚动条触动css动画效果</a></li>
                        <li><a target="_blank" href="13.html">别让这些闹心的套路，毁了你的网页设计</a></li>
                        <li><a target="_blank" href="16.html">使用CSS3制作文字、图片倒影</a></li>
                        <li><a target="_blank" href="17.html">【分享】css3侧边栏导航不同方向划出效果</a></li>
                   </ul>
    </div>
    <div class="ad whitebg imgscale">
      <ul>
        <a href='javascript:;' target="_blank"><img src='static/picture/ad02.jpg'></a>      </ul>
    </div>
    <div class="whitebg tongji">
      <h2 class="htitle">站点信息</h2>
      <ul>
        <li><b>建站时间</b>：2018-10-24</li>
        <li><b>网站程序</b>：帝国CMS7.5</li>
        <li><b>主题模板</b>：<a href="javascript:;" target="_blank">《今夕何夕》</a></li>
        <li><b>文章统计</b>：<a href="index8.html" target="_blank">32</a>篇文章</li>
        <li><b>标签管理</b>：<a href="tags.html" target="_blank">标签云</a></li>
        <li><b>统计数据</b>：<a href="index.html" target="_blank">百度统计</a></li>
        <li><b>微信公众号</b>：扫描二维码，关注我们</li>
        <li class="tongji_gzh"><a href='index.html' target="_blank"><img src='static/picture/wxgzh.jpg'></a></li>
      </ul>
    </div>
  </div>
</article>
<footer>
  <div class="box">
    <div class="wxbox">
      <ul>
        <li><img src="static/picture/wxgzh.jpg"><span>微信公众号</span></li>
        <li><img src="static/picture/wx.png"><span>我的微信</span></li>
      </ul>
    </div>
    <div class="endnav">
      <p><b>站点声明：</b></p>
      <p>1、本站个人博客模板，均为杨青青本人设计，个人可以使用，但是未经许可不得用于任何商业目的。</p>
      <p>2、所有文章未经授权禁止转载、摘编、复制或建立镜像，如有违反，追究法律责任。举报邮箱：<a href="javascript:;" target="_blank">dacesmiling@qq.com</a></p>
      <p>Copyright © <a href="javascript:;" target="_blank">www.yangqq.com</a> All Rights Reserved. 备案号：<a href="javascript:;" target="_blank">蜀ICP备11002373号-1</a></p>
    </div>
  </div>
  <a href="#">
  <div class="top"></div>
  </a> </footer>
</body>
</html>
